<template>
  <div class="page order-record">
    <div class="scroll-view">
      <customHeader middleTitle="订购记录" @leftCallBack="handleBack" @rightCallBack="callService">
        <i class="zhk-kf"></i>
      </customHeader>
      <mt-navbar v-model="selected">
        <mt-tab-item id="1">全部订单</mt-tab-item>
        <mt-tab-item id="2">待付款</mt-tab-item>
        <mt-tab-item id="3">待处理</mt-tab-item>
        <mt-tab-item id="4">已完成</mt-tab-item>
      </mt-navbar>
      <div class="page-body">
        <mt-tab-container v-model="selected">
          <mt-tab-container-item id="1">
            <orderList v-if="selected==1" :selected="selected"/>
          </mt-tab-container-item>
          <mt-tab-container-item id="2">
            <orderList v-if="selected==2" :selected="selected"/>
          </mt-tab-container-item>
          <mt-tab-container-item id="3">
            <orderList v-if="selected==3" :selected="selected"/>
          </mt-tab-container-item>
          <mt-tab-container-item id="4">
            <orderList v-if="selected==4" :selected="selected"/>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
  </div>
</template>
                    
<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import jsBridge from "../../tools/jsBridge.js";
import { MessageBox, Navbar, TabItem } from "mint-ui";
import orderList from "./components/orderList";
Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);

export default {
  name: "orderRecord",
  data() {
    return {
      selected: "1",
      from: ""
    };
  },
  watch: {
    selected(curVal, oldVal) {
      sessionStorage.setItem("orderRecordTabIndex", curVal);
    }
  },
  methods: {
    handleBack() {
       this.$router.push({ path: "/mallList",query:{close:true} });
    },
    succCallback() {},
    failCallback() {},
    // //拨打客服
    callService() {
      MessageBox({
        title: "联系客服",
        message: "400-109-9960",
        showCancelButton: true,
        confirmButtonText: "拨打"
      }).then(action => {
        if (action === "confirm") {
          //拨打电话
          let params = {
            tel: "4001099960"
            // succCallback: this.succCallback,
            // failCallback: this.failCallback
          };
          jsBridge.callUp(params);
        }
      });
    }
  },
  // beforeRouteEnter(to, from, next) {
  //   // debugger;
  //   // this.from = from.name;
  //   next(vm => {
  //     // vm.from = from.name;
  //     if (from.name) {
  //       this.selected = "1";
  //       sessionStorage.removeItem("orderRecordTabIndex");
  //     }
  //   });
  // },
  mounted() {
    this.selected = sessionStorage.getItem("orderRecordTabIndex")||'1';
  },
  components: {
    customHeader,
    orderList
  }
};
</script>
<style lang='scss' scoped>
@import "mall";
</style>
<style lang='scss'>
.mint-navbar {
  .mint-tab-item {
    &.is-selected {
      // margin-bottom: none !important;
      // border-bottom: 3px solid #666;
    }
  }
}
.page-infinite-loading {
  text-align: center;
  span {
    display: inline-block !important;
  }
}
.order-record {
  .mint-tab-container {
    height: 100%;
    .mint-tab-container-wrap {
      height: 100%;
    }
  }
}
</style>

